<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org"
      th:replace="~{common/layout :: html(title='关于我们', content=~{::content})}">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>关于我们 - 扶贫助农电商平台</title>
    
    <!-- Bootstrap CSS -->
    <link th:href="@{/webjars/bootstrap/5.3.0/css/bootstrap.min.css}" rel="stylesheet">
    <!-- Font Awesome -->
    <link th:href="@{/webjars/font-awesome/6.4.0/css/all.min.css}" rel="stylesheet">
    
    <style>
        .hero-section {
            background: linear-gradient(135deg, #28a745, #20c997);
            color: white;
            padding: 80px 0;
        }
        .feature-card {
            background: white;
            border-radius: 15px;
            padding: 30px;
            box-shadow: 0 5px 20px rgba(0,0,0,0.1);
            transition: transform 0.3s;
            margin-bottom: 30px;
        }
        .feature-card:hover {
            transform: translateY(-10px);
        }
        .stats-section {
            background: #f8f9fa;
            padding: 60px 0;
        }
        .stat-item {
            text-align: center;
            padding: 20px;
        }
        .stat-number {
            font-size: 3rem;
            font-weight: bold;
            color: #28a745;
        }
        .mission-vision {
            background: linear-gradient(135deg, #007bff, #6610f2);
            color: white;
            padding: 60px 0;
        }
        .story-section {
            padding: 80px 0;
        }
        .story-card {
            background: #fff;
            border-radius: 15px;
            padding: 30px;
            box-shadow: 0 3px 15px rgba(0,0,0,0.1);
            margin-bottom: 30px;
        }
    </style>
</head>
<body>
    <div th:fragment="content">
        <!-- 页面头部 -->
        <section class="hero-section">
            <div class="container">
                <div class="row align-items-center">
                    <div class="col-lg-6">
                        <h1 class="display-4 fw-bold mb-4">扶贫助农，我们在行动</h1>
                        <p class="lead mb-4" th:text="${mission}">
                            连接城乡，助力脱贫，让每一份农产品都承载着希望与温暖
                        </p>
                        <div class="d-flex gap-3">
                            <a href="/product/list" class="btn btn-light btn-lg">
                                <i class="fas fa-shopping-cart"></i> 购买农产品
                            </a>
                            <a href="/news/list" class="btn btn-outline-light btn-lg">
                                <i class="fas fa-newspaper"></i> 了解更多
                            </a>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="text-center">
                            <i class="fas fa-hands-helping fa-10x opacity-75"></i>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 统计数据 -->
        <section class="stats-section">
            <div class="container">
                <div class="row">
                    <div class="col-lg-3 col-md-6">
                        <div class="stat-item">
                            <div class="stat-number">2000+</div>
                            <h5>合作农户</h5>
                            <p class="text-muted">贫困地区农户直接受益</p>
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-6">
                        <div class="stat-item">
                            <div class="stat-number">50+</div>
                            <h5>贫困县区</h5>
                            <p class="text-muted">覆盖全国多个贫困地区</p>
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-6">
                        <div class="stat-item">
                            <div class="stat-number">500万+</div>
                            <h5>累计销售额</h5>
                            <p class="text-muted">直接帮助农户增收</p>
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-6">
                        <div class="stat-item">
                            <div class="stat-number">10万+</div>
                            <h5>用户信赖</h5>
                            <p class="text-muted">全国用户共同参与</p>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 使命愿景 -->
        <section class="mission-vision">
            <div class="container">
                <div class="row">
                    <div class="col-lg-6 mb-4">
                        <div class="feature-card h-100">
                            <div class="text-center mb-4">
                                <i class="fas fa-bullseye fa-4x text-primary"></i>
                            </div>
                            <h3 class="text-center mb-4 text-dark">我们的使命</h3>
                            <p class="text-center text-dark" th:text="${mission}">
                                连接城乡，助力脱贫，让每一份农产品都承载着希望与温暖。通过电商平台，为贫困地区农户提供直销渠道，帮助他们增收脱贫，实现共同富裕的美好愿景。
                            </p>
                        </div>
                    </div>
                    <div class="col-lg-6 mb-4">
                        <div class="feature-card h-100">
                            <div class="text-center mb-4">
                                <i class="fas fa-eye fa-4x text-success"></i>
                            </div>
                            <h3 class="text-center mb-4 text-dark">我们的愿景</h3>
                            <p class="text-center text-dark" th:text="${vision}">
                                成为中国领先的扶贫农产品电商平台，让更多贫困地区的优质农产品走向全国，让更多农户通过我们的平台脱贫致富，为乡村振兴贡献力量。
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 农户生产过程 -->
        <section class="story-section">
            <div class="container">
                <div class="text-center mb-5">
                    <h2 class="display-5 fw-bold">农户生产过程</h2>
                    <p class="lead text-muted">每一份农产品都经过精心种植和严格把控</p>
                </div>
                
                <div class="row">
                    <div class="col-lg-4 col-md-6 mb-4">
                        <div class="story-card">
                            <div class="text-center mb-3">
                                <i class="fas fa-seedling fa-3x text-success"></i>
                            </div>
                            <h4>生态种植</h4>
                            <p>采用传统生态种植方式，不使用化学农药，确保农产品的天然品质。农户们世代传承的种植技艺，让每一颗果实都饱含自然的味道。</p>
                        </div>
                    </div>
                    
                    <div class="col-lg-4 col-md-6 mb-4">
                        <div class="story-card">
                            <div class="text-center mb-3">
                                <i class="fas fa-hand-holding-water fa-3x text-primary"></i>
                            </div>
                            <h4>精心护理</h4>
                            <p>农户们每天精心照料作物，从播种到收获的每个环节都倾注心血。他们用勤劳的双手和朴实的匠心，培育出优质的农产品。</p>
                        </div>
                    </div>
                    
                    <div class="col-lg-4 col-md-6 mb-4">
                        <div class="story-card">
                            <div class="text-center mb-3">
                                <i class="fas fa-check-circle fa-3x text-warning"></i>
                            </div>
                            <h4>严格筛选</h4>
                            <p>每一批农产品都经过严格的质量筛选，只有达到标准的产品才能进入我们的平台。确保消费者购买到的都是优质农产品。</p>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 脱贫成效 -->
        <section class="py-5 bg-light">
            <div class="container">
                <div class="text-center mb-5">
                    <h2 class="display-5 fw-bold">脱贫成效</h2>
                    <p class="lead text-muted">真实的数据见证我们的扶贫成果</p>
                </div>
                
                <div class="row">
                    <div class="col-lg-6 mb-4">
                        <div class="feature-card">
                            <h4><i class="fas fa-chart-line text-success"></i> 收入增长</h4>
                            <p>通过我们的平台，参与的农户平均收入增长了<strong class="text-success">150%</strong>，许多家庭实现了从贫困到小康的跨越。</p>
                            <ul class="list-unstyled">
                                <li><i class="fas fa-check text-success"></i> 月收入从800元增长到2000元</li>
                                <li><i class="fas fa-check text-success"></i> 年收入突破2万元大关</li>
                                <li><i class="fas fa-check text-success"></i> 家庭生活质量显著提升</li>
                            </ul>
                        </div>
                    </div>
                    
                    <div class="col-lg-6 mb-4">
                        <div class="feature-card">
                            <h4><i class="fas fa-home text-primary"></i> 生活改善</h4>
                            <p>不仅仅是经济收入的提升，农户们的生活条件和精神面貌都有了巨大改变。</p>
                            <ul class="list-unstyled">
                                <li><i class="fas fa-check text-primary"></i> 90%的农户搬进了新房</li>
                                <li><i class="fas fa-check text-primary"></i> 100%的孩子能够接受良好教育</li>
                                <li><i class="fas fa-check text-primary"></i> 医疗保障覆盖率达到100%</li>
                            </ul>
                        </div>
                    </div>
                </div>
                
                <!-- 成功案例 -->
                <div class="row mt-5">
                    <div class="col-lg-12">
                        <div class="feature-card">
                            <h4><i class="fas fa-star text-warning"></i> 成功案例</h4>
                            <div class="row">
                                <div class="col-md-4 text-center mb-3">
                                    <div class="story-card bg-light">
                                        <h5>张大爷的苹果园</h5>
                                        <p>通过平台销售，年收入从5000元增长到3万元，儿子也回乡创业。</p>
                                    </div>
                                </div>
                                <div class="col-md-4 text-center mb-3">
                                    <div class="story-card bg-light">
                                        <h5>李阿姨的手工艺品</h5>
                                        <p>传统手工艺品通过电商走向全国，月收入超过2000元。</p>
                                    </div>
                                </div>
                                <div class="col-md-4 text-center mb-3">
                                    <div class="story-card bg-light">
                                        <h5>王叔叔的有机蔬菜</h5>
                                        <p>有机蔬菜直供城市，不仅收入翻倍，还带动了整个村的发展。</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>

    <!-- jQuery -->
    <script th:src="@{/webjars/jquery/3.7.0/jquery.min.js}"></script>
    <!-- Bootstrap JS -->
    <script th:src="@{/webjars/bootstrap/5.3.0/js/bootstrap.bundle.min.js}"></script>
</body>
</html> 